<style type="text/css">

#MatterAddActor:hover {
    cursor: pointer;
}

.formtitle{
    width:90px;
    display: inline-block;
    text-align: right;
    margin-bottom: 10px;
}
#actor-details-popup{
    position: fixed;
    z-index: 110;
    display:none;
    width: 670px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    var role_search = "<?=$this->role_search?>";   

    $('.role_search').click(function() { 
        
        role_search = $(this).val();
         $.ajax({
                type: "GET",
                url: "/matter/map-actor-role/id/<?=$this->matter_id?>/role/<?=$this->role?>/role_search/" + role_search ,
                success: function(data){
                    $('#mapactor-pop-up').html(data);
                }
        });
    });


    $('#rolebox').change(function(){
      var role_val = $('#rolebox').val().split('-');
      if(role_val[1] == 1){
        $('input[name=matter_container]:eq(0)').click();
      }
      else{
        $('input[name=matter_container]:eq(1)').click();
      }
    });

    $("#cancel").click(function(event){
        $('#mapactor-pop-up').css('display','none');
        $('#mapactor-pop-up').empty();
        $('#facade').css('display','none');
    });

    $("#MatterAddActor").click(function(event){
        $('#mapactor-pop-up').css('display','none');
        $('#mapactor-pop-up').empty();
        $('#facade').css('display','none');
    });
    
    $( "#actor-name" ).autocomplete({
            minLength: 1,
            source: "/matter/get-all-actors/",
            select: function( event, ui ) {
                if(ui.item.id == 'cna786'){
                    var drole = $('#rolebox').val().split('-');
                    $.ajax({
                        type: "GET",
                        url: '/matter/add-actor/role/'+drole[0],
                        success: function(data){
                            $('#actor-details-popup').html(data);
                            var ren_left = Math.round($(window).width()/2) - Math.round($('#actor-details-popup').width()/2);
                            $('#actor-details-popup').css('left', ren_left);
                            $('#actor-details-popup').css('top', '10px');
                            $('#name').focus();
                        }
                    });
                    $('#actor-details-popup').css('display', 'block');
                }else{
                    $( "#actor-name" ).val(Encoder.htmlDecode(ui.item.value));
                    $( "#actor-id" ).val( ui.item.id );
                }
                return false;
            },
            autoFocus: true,
    });

    $("#submit").click(function(){
      $('#facade').css('height',$(document).height());
      $('#facade').css('display','block');
      var role_val = $('#rolebox').val().split('-');
      $.ajax({
        type: "POST",
        url: '/matter/add-matter-actor/',
        data: { matter_ID : $('#matter-id').val(), actor_ID : $('#actor-id').val(), role : role_val[0], add_container : $('input[name=matter_container]:checked').val(), role_shareable : role_val[1], actor_ref : $('#actor-ref').val() },
        success: function(data){
          message = "'" +data + "'";
          if(data.match(/SQLSTATE/)){
               alert(message);
          } else {
             $('#mapactor-pop-up').css('display','none');
             $('#mapactor-pop-up').empty();
             $('#facade').css('display','none');
             location.reload();
          }
        }
      });
    });
    
    $( "button, input:submit").button();
});

$( "#actor-name" ).focus();

</script>  
<div class="listrow" style="width:350px"><div id="MatterAddActor" class="status-row">
<span class="eventlist-col-name" style="margin-left: 5px;">Add Actor</span>
</div>
<div class="list-matter-block-info" style="max-height: 350px; min-height: 100px; width:98%; height: auto; background: whitesmoke;" >

<span class="formtitle">Role</span> <select id="rolebox" name="role_select">
        <option value='0-0'>Select</option> 
<?php
        $cont_yes = ""; $cont_no = "";
        foreach ($this->all_roles as $role){
            if ($role['code'] == $this->role_search){
                $selected = " selected";
                ($role['shareable']) ? $cont_yes = "checked" : $cont_no = "checked";
            }
            else
                $selected = "";
            echo "<option value='". $role['code'] ."-". $role['shareable']."' $selected>" . $role['name'] . "</option>";
        }
            if (1 == $this->role_search)
                $selected = " selected";
            else
                $selected = "";
        ?>
      </select>
<br>
<span class="formtitle">Name</span> <input id="actor-name" size="30"/>
<input type="hidden" id="actor-id" />
<br>
<span class="formtitle">Ref.</span> <input id="actor-ref" size="30"/>
<input type="hidden" id="matter-id" value="<?=$this->matter_id?>" />
<br>
<?php if($this->container_id): ?>
<input type="radio" name="matter_container" value="<?=$this->container_id?>" id="container_yes" <?=$cont_yes?> />
<label for="container_yes" >Add actor to container</label><br>
<input type="radio" name="matter_container" value='0' id="container_no" <?=$cont_no?> />
<label for="container_no" >Add actor to current matter only</label>
<br>
<?php endif; ?>
<div style="float: right;">
<button id="submit">Add</button>
<button id="cancel">Cancel</button>
</div>
</div>
</div>

<div id="actor-details-popup" class="place-card"></div>
